<template>
	<view>
		<view v-if="showTip" class="advice_box">
			建议步行
		</view>
		<view class="text_box" v-for="(item,index) in transits" :key="index" v-else>
			<view class="time_km">
				<view class="" style="font-weight: bold;margin-right: 10rpx;">
					<text v-if='Number(item.duration)<3600'>{{Math.ceil(Number(item.duration) / 60)}}分钟</text>
					<text
						v-else>{{Math.floor(Number(item.duration) / 3600)}}小时{{Math.ceil(Number(item.duration)%3600/60)}}分钟</text>
				</view>
				<view class="distance_box">
					<i class="iconfont icon-buhang"></i>
					<text v-if='Number(item.walking_distance)<1000'>{{item.walking_distance}}米</text>
					<text v-else>{{(Number(item.walking_distance) / 1000).toFixed(1)}}公里</text>
				</view>

			</view>
			<view class="path_item">
				<view v-for="(item2,index2) in item.transport" :key="index2">
					<text>{{item2}}</text>
					<u-icon name="play-right-fill" color="#9B9B9B" size="20"
						v-if="index2 === item.transport.length-1 ? false:true"></u-icon>
				</view>
			</view>
			<view class="">
				{{item.cost}}元
			</view>
		</view>

	</view>
</template>

<script>
	import '@/static/iconfont/iconfont.css'
	
	export default {
		props: {
			transits: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				showTip: false,
			}
		},
		watch: {
			transits: {
				handler(newVal, oldVal) {
					console.log('newVal', newVal)
					// console.log('oldVal', oldVal)
					if (newVal && newVal.length > 0) {
						this.showTip = false
					} else {
						this.showTip = true
					}
				},
				immediate: true,
				deep: true
			}
		},
		created() {


		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.advice_box {
		width: 100vw;
		height: 30vh;
		text-align: center;
		line-height: 30vh;
		font-size: 36rpx;
		font-weight: bold;
	}

	.text_box {
		width: 90vw;
		margin: 20rpx auto;
		background-color: #ffffff;
		padding: 20rpx 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
		display: flex;
		flex-direction: column;
	}

	.time_km {
		padding: 10rpx 0;
		display: flex;
	}

	.path_item {
		display: flex;
		padding: 10rpx 0;
	}
	.distance_box{
		display: flex;
		align-items: center;
		font-weight: bold;
	}
	.iconfont{
		font-size: 28rpx;
		font-weight: 100;
	}
</style>
